<template>
  <section class="values-section" id="values">
    <div class="container">
      <div class="section-header">
        <h2 class="section-title">核心价值观</h2>
        <p class="section-subtitle">传承顶级投资机构的理念，构建可持续发展的智能生态</p>
      </div>
      
      <div class="values-grid">
        <div class="value-card" v-for="(value, index) in values" :key="index" @click="openModal(value)">
          <div class="value-icon">
            <div class="icon-wrapper" :class="value.iconClass">
              <div class="icon-inner"></div>
            </div>
          </div>
          <h3 class="value-title">{{ value.title }}</h3>
          <p class="value-description">{{ value.description }}</p>
          <div class="value-source">{{ value.source }}</div>
          <div class="value-glow"></div>
          <div class="click-hint">深入了解</div>
        </div>
      </div>
      
      <div class="values-integration">
        <h3 class="integration-title">理念融合，价值共创</h3>
        <p class="integration-description">
          我们汲取全球顶级投资机构的智慧精华，结合中国本土创新实践，
          构建独特的"正核博弈"价值体系，为投资者创造可持续的长期价值。
        </p>
        <div class="integration-stats">
          <div class="stat-item">
            <div class="stat-number">15+</div>
            <div class="stat-label">年投资经验传承</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">100+</div>
            <div class="stat-label">成功案例借鉴</div>
          </div>
          <div class="stat-item">
            <div class="stat-number">∞</div>
            <div class="stat-label">创新价值创造</div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- Modal for detailed information -->
    <ModalComponent 
      :isVisible="showModal" 
      :title="selectedValue?.title"
      @close="closeModal"
    >
      <div v-if="selectedValue" class="modal-details">
        <div class="detail-section">
          <h4>核心理念</h4>
          <p>{{ selectedValue.coreConcept }}</p>
        </div>
        
        <div class="detail-section">
          <h4>投资实践</h4>
          <ul>
            <li v-for="practice in selectedValue.practices" :key="practice">{{ practice }}</li>
          </ul>
        </div>
        
        <div class="detail-section">
          <h4>价值体现</h4>
          <p>{{ selectedValue.valueManifestation }}</p>
        </div>
        
        <div class="detail-section">
          <h4>未来展望</h4>
          <p>{{ selectedValue.futureOutlook }}</p>
        </div>
      </div>
    </ModalComponent>
  </section>
</template>

<script>
import ModalComponent from './ModalComponent.vue'

export default {
  name: 'ValuesSection',
  components: {
    ModalComponent
  },
  data() {
    return {
      showModal: false,
      selectedValue: null,
      values: [
        {
          title: '长期价值投资',
          description: '专注长期价值创造，不追求短期投机，为投资者提供稳定可持续的回报',
        
          iconClass: 'longterm-icon',
          coreConcept: '我们坚信真正的价值来自于长期积累和持续创新。通过深度研究和技术创新，我们构建能够持续创造价值的智能平台，为投资者提供长期稳定的回报。',
          practices: [
            '深度研究教育科技发展趋势',
            '长期持有优质技术资产',
            '持续投入研发和创新',
            '建立长期合作伙伴关系'
          ],
          valueManifestation: '通过Skillith平台的长期运营和持续优化，我们为投资者创造稳定的现金流和资产增值，实现真正的长期价值投资。',
          futureOutlook: '随着平台生态的不断完善和用户规模的持续增长，长期价值投资理念将为我们带来更加丰厚的回报。'
        },
        {
          title: '创新驱动增长',
          description: '以技术创新为核心驱动力，通过AI和区块链技术推动产业变革',
         
          iconClass: 'innovation-icon',
          coreConcept: '创新是我们发展的根本动力。我们不仅采用最新的AI和区块链技术，更在商业模式和生态构建上进行创新，创造全新的价值创造模式。',
          practices: [
            '持续投入前沿技术研发',
            '探索新的商业模式',
            '构建创新生态系统',
            '培养创新人才团队'
          ],
          valueManifestation: '通过技术创新，我们构建了独特的正核博弈生态，创造了传统模式无法实现的价值增长空间。',
          futureOutlook: '技术创新将推动我们进入更多新兴领域，创造无限的增长可能性。'
        },
        {
          title: '生态协同共赢',
          description: '构建多方共赢的生态系统，让每个参与者都能从中受益',
      
          iconClass: 'ecosystem-icon',
          coreConcept: '我们构建的不是简单的平台，而是一个多方共赢的生态系统。通过正核博弈理念，我们让教育、企业、学生、投资者都能在生态中受益。',
          practices: [
            '建立多方参与机制',
            '设计共赢分配模式',
            '构建生态护城河',
            '促进生态内循环'
          ],
          valueManifestation: '生态协同效应为我们带来了网络效应和规模效应，创造了传统商业模式无法比拟的竞争优势。',
          futureOutlook: '随着生态的不断壮大，协同效应将越来越强，为所有参与者创造更大的价值。'
        },
        {
          title: '社会责任担当',
          description: '承担社会责任，通过技术创新推动教育公平和社会进步',
          
          iconClass: 'responsibility-icon',
          coreConcept: '我们不仅追求商业成功，更承担着推动社会进步的责任。通过Skillith平台，我们致力于解决教育与职场脱节问题，推动教育公平和社会生产力的提升。',
          practices: [
            '推动教育公平化',
            '提升社会生产力',
            '培养未来人才',
            '促进社会和谐发展'
          ],
          valueManifestation: '社会责任担当为我们赢得了政府支持和社会认可，为商业成功奠定了坚实基础。',
          futureOutlook: '随着社会责任的不断履行，我们将获得更多的政策支持和资源倾斜。'
        },
        {
          title: '全球视野布局',
          description: '具备全球视野，布局国际市场，构建国际化发展格局',
       
          iconClass: 'global-icon',
          coreConcept: '我们不仅立足中国，更具备全球视野。通过技术创新和模式创新，我们构建了具有国际竞争力的产品和服务，为全球化发展奠定基础。',
          practices: [
            '研究全球市场趋势',
            '构建国际化团队',
            '拓展海外市场',
            '建立国际合作伙伴关系'
          ],
          valueManifestation: '全球视野布局为我们打开了更广阔的市场空间，创造了更大的增长潜力。',
          futureOutlook: '随着全球化的深入推进，我们将成为具有国际影响力的科技公司。'
        },
        {
          title: '数据驱动决策',
          description: '基于大数据和AI技术，实现精准决策和智能运营',
         
          iconClass: 'data-icon',
          coreConcept: '数据是我们决策的基础。通过大数据分析和AI技术，我们能够精准把握市场趋势，优化产品和服务，实现智能化的运营管理。',
          practices: [
            '建立完善的数据体系',
            '运用AI进行智能分析',
            '实现数据驱动的决策',
            '持续优化运营效率'
          ],
          valueManifestation: '数据驱动决策为我们提供了竞争优势，让我们能够更精准地把握市场机会。',
          futureOutlook: '随着数据技术的不断发展，我们将实现更加智能化的运营和管理。'
        }
      ]
    }
  },
  methods: {
    openModal(value) {
      this.selectedValue = value
      this.showModal = true
    },
    closeModal() {
      this.showModal = false
      this.selectedValue = null
    }
  }
}
</script>

<style scoped>
.values-section {
  padding: 6rem 0;
  background: linear-gradient(135deg, #F8FAFC 0%, #E8F4FD 50%, #F5F7FA 100%);
  position: relative;
  overflow: hidden;
}

.values-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    radial-gradient(circle at 20% 20%, rgba(0, 102, 255, 0.05) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(138, 43, 226, 0.05) 0%, transparent 50%);
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  position: relative;
  z-index: 2;
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #0A2463;
  margin-bottom: 1rem;
  position: relative;
}

.section-title::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 60px;
  height: 4px;
  background: linear-gradient(90deg, #0066FF, #8A2BE2);
  border-radius: 2px;
}

.section-subtitle {
  font-size: 1.2rem;
  color: #2D3748;
  max-width: 600px;
  margin: 0 auto;
  line-height: 1.6;
}

.values-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
  margin-bottom: 4rem;
}

.value-card {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  padding: 2.5rem;
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
  cursor: pointer;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

.value-card:hover {
  transform: translateY(-10px);
  box-shadow: 0 20px 50px rgba(0, 102, 255, 0.15);
  border-color: rgba(0, 102, 255, 0.3);
}

.value-glow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, rgba(0, 102, 255, 0.05), rgba(138, 43, 226, 0.05));
  opacity: 0;
  transition: opacity 0.3s ease;
  border-radius: 20px;
}

.value-card:hover .value-glow {
  opacity: 1;
}

.click-hint {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  font-size: 0.8rem;
  color: rgba(0, 102, 255, 0.7);
  font-weight: 500;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.value-card:hover .click-hint {
  opacity: 1;
}

.value-icon {
  margin-bottom: 1.5rem;
}

.icon-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.longterm-icon {
  background: linear-gradient(135deg, #0066FF, #8A2BE2);
}

.innovation-icon {
  background: linear-gradient(135deg, #8A2BE2, #00B9AE);
}

.ecosystem-icon {
  background: linear-gradient(135deg, #00B9AE, #0066FF);
}

.responsibility-icon {
  background: linear-gradient(135deg, #FF6B6B, #8A2BE2);
}

.global-icon {
  background: linear-gradient(135deg, #4ECDC4, #0066FF);
}

.data-icon {
  background: linear-gradient(135deg, #8A2BE2, #FF6B6B);
}

.icon-inner {
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 10px;
  position: relative;
}

.longterm-icon .icon-inner::before {
  content: '📈';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
}

.innovation-icon .icon-inner::before {
  content: '💡';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
}

.ecosystem-icon .icon-inner::before {
  content: '🌐';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
}

.responsibility-icon .icon-inner::before {
  content: '🤝';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
}

.global-icon .icon-inner::before {
  content: '🌍';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
}

.data-icon .icon-inner::before {
  content: '📊';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 20px;
}

.value-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: #0A2463;
  margin-bottom: 1rem;
}

.value-description {
  color: #2D3748;
  line-height: 1.6;
  margin-bottom: 1rem;
}

.value-source {
  font-size: 0.9rem;
  color: rgba(0, 102, 255, 0.7);
  font-style: italic;
  font-weight: 500;
}

.values-integration {
  text-align: center;
  background: linear-gradient(135deg, rgba(0, 102, 255, 0.1), rgba(138, 43, 226, 0.1));
  border-radius: 20px;
  padding: 3rem;
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.2);
}

.integration-title {
  font-size: 2rem;
  font-weight: 700;
  color: #0A2463;
  margin-bottom: 1.5rem;
}

.integration-description {
  font-size: 1.1rem;
  color: #2D3748;
  line-height: 1.7;
  margin-bottom: 2rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.integration-stats {
  display: flex;
  justify-content: center;
  gap: 3rem;
  flex-wrap: wrap;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 800;
  background: linear-gradient(135deg, #0066FF, #8A2BE2);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.9rem;
  color: #2D3748;
  font-weight: 500;
}

.modal-details {
  color: #2D3748;
}

.detail-section {
  margin-bottom: 2rem;
}

.detail-section h4 {
  font-size: 1.3rem;
  font-weight: 600;
  color: #0A2463;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid #0066FF;
}

.detail-section ul {
  list-style: none;
  padding: 0;
}

.detail-section li {
  padding: 0.5rem 0;
  position: relative;
  padding-left: 1.5rem;
}

.detail-section li::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: #00B9AE;
  font-weight: bold;
}

.detail-section p {
  line-height: 1.7;
}

@media (max-width: 768px) {
  .values-section {
    padding: 4rem 0;
  }

  .section-title {
    font-size: 2rem;
  }

  .section-subtitle {
    font-size: 1rem;
  }

  .values-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .value-card {
    padding: 2rem;
  }

  .integration-title {
    font-size: 1.5rem;
  }

  .integration-stats {
    gap: 2rem;
  }

  .container {
    padding: 0 1rem;
  }
}
</style>
